import React from 'react';
import { connect } from 'react-redux';
import { API_HOST } from 'Constants/config';
import { message } from 'antd';
import Api from 'Utils/api';
import VR_TYPE from 'Constants/vrType';
import EqualBorder from './../../../../../CommonComponents/EqualBorder';

class DetailPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      data: {},
    };
    this.initList = ::this.initList;
  }
  componentDidMount() {
    this.initList();
  }
  initList() {
    const api = new Api({
      method: 'GET',
      path: `/processes/${this.state.id}`,
      success: (json) => {
        this.setState({ data: json });
        if (json.flow_vr) {
          this.insertVrInfos(json.media_type, json.flow_vr);
        }
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  returnVrType(type) {
    if (type.indexOf('video') > -1) {
      return VR_TYPE.video;
    }
    if (type.indexOf('image') > -1) {
      return VR_TYPE.img;
    }
    return false;
  }
  insertVrInfos(mediaType, media) {
    if (this.returnVrType(mediaType) === VR_TYPE.video) {
      if (!this.vrVideo) {
        this.vrVideo = new VRView.Player('#video', {
          width: '100%',
          height: '100%',
          video: `${API_HOST}/files/${media}`,
          is_stereo: false,  //区分是mono还是stereo
        });
      } else {
        this.vrVideo.setContent({
          video: `${API_HOST}/files/${media}`,
        });
      }
    }
    if (this.returnVrType(mediaType) === VR_TYPE.img) {
      if (!this.vrVideo) {
        this.vrVideo = new VRView.Player('#video', {
          width: '100%',
          height: '100%',
          image: `${API_HOST}/files/${media}`,
          is_stereo: false,  //区分是mono还是stereo
        });
      } else {
        this.vrVideo.setContent({
          image: `${API_HOST}/files/${media}`,
        });
      }
    }
  }
  render() {
    const { data } = this.state;
    return (
      <EqualBorder
        title="最多跑一次详情"
        content={
          <div className="dynamic-detail-body-container">
            <ul className="detail-body">
              <li className="item">
                <div>类别：</div>
                <div>{data.type}</div>
              </li>
              <li className="item">
                <div>办事流程说明：</div>
                <div>
                  {
                    data.process_name ? <span dangerouslySetInnerHTML={{ __html: data.process_name.replace(/\n/g, '<br/>') }} /> : ''
                  }
                </div>
              </li>
              <li className="item">
                <div>LOGO：</div>
                <div>
                  <img src={data.logo ? `${API_HOST}/files/${data.logo}` : ''} alt="图片" style={{ width: 30, height: 30 }} />
                </div>
              </li>
              <li className="item">
                <div className="textarea-left">简介：</div>
                <div className="textarea">
                  {
                    data.introduction ? <span dangerouslySetInnerHTML={{ __html: data.introduction.replace(/\n/g, '<br/>') }} /> : ''
                  }
                </div>
              </li>
              <li className="item">
                <div>图片：</div>
                <div className="video-wrap">
                  <img src={data.flow_chat ? `${API_HOST}/files/${data.flow_chat}` : ''} alt="图片" />
                </div>
              </li>
              <li className="item">
                <div>VR：</div>
                {
                  data.flow_vr ? <div className="video-wrap" id="video" /> : ''
                }
              </li>
            </ul>
          </div>
        }
      />
    );
  }
}


function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(DetailPage);
